<template>
  <div class="content-style">
    <h2>富文本编辑</h2>
    <el-button size="mini" type="primary" icon="el-icon-edit" @click="submit">提交</el-button>
    <div id="div1" style="width: 90%; height: 9%"></div>    
  </div>
</template>

<script>
import Wangeditor from "wangeditor";
export default {
  name: "richText",
  data() {
    return {
      editor: null // 富文本编辑器对象，获取值从这里面获取：this.editor.txt.html()/或text()
    };
  },
  created() {
    
  },
  mounted(){
    this.wangeditorInit();
  },
  methods: {
    wangeditorInit() {
      // 初始化富文本编辑器
      this.editor = new Wangeditor("#div1"); // 注意这里用的是 new ；如果全局引用就是 this.$wangeditor
      // 配置颜色
      this.editor.config.colors = [
        "#272727",
        "#8B0016",
        "#DF0029",
        "#F5A89A",
        "#F19373",
        "#FCD9C4",
        "#BD6B09",
        "#ECECEC",
        "#EC870E",
        "#FACE9C",
        "#D59B00",
        "#9C9900",
        "#F9F400",
        "#367517",
        "#5BBD2B",
        "#C2C2C2",
        "#00A06B",
        "#98D0B9",
        "#008489",
        "#00B2BF",
        "#103667",
        "#1B4F93",
        "#426EB4",
        "#A0A0A0",
        "#94AAD6",
        "#2D1E69",
        "#3A2885",
        "#38044B",
        "#5D0C7B",
        "#C9B5D4",
        "#AF4A92",
        "#D2A6C7",
        "#707070",
        "#363636",
        "#8F006D",
        "#000000",
        "#ffffff",
        "#C8E2B1",
        "#006241"
      ];
      // 配置行高
      this.editor.config.lineHeights = [
        "0.8",
        "1",
        "1.2",
        "1.6",
        "2",
        "2.5",
        "3"
      ];
      this.editor.create();
      // this.editor.txt.html(this.addAndEditFormData.content); // 重新设置编辑器内容
    },
    // 提交数据
    submit() {
      let content = this.editor.txt.html();
      console.log(content);
    }
  }
};
</script>

<style scoped>
.content-style {
  margin-top: 15px;
}
</style>
